<template>
	<view class="exchange">
		<view class="hd">
			<view class="right">

				<image src="../../../../static/home.png" style="width: 80rpx;height: 80rpx;"></image>
				<view class="num">{{ totalMoney }}</view>
			</view>
			<view class="left">
				<image src="../../../../static/image/my/jfdhpic.png" style="width: 150rpx;height: 150rpx;" />
				<view class="text">当前余额</view>
			</view>
		</view>
		<view class="bd">
			<view class="title">提现金额</view>

			<view style="display: flex;">
				<input v-model="exchangeValue" type="number"  placeholder="请输入提现金额" style="font-size: 45rpx;margin-top: 20rpx;" />
				<button @click="handleSetAll" class="handleSetAll">全部</button>
			</view>
			<view style="height: 1rpx;width: 100%;background: gainsboro;margin-top: 40rpx;"></view>
		
			<button class="exchange-btn" @click="exchangeIntegration">立即提现</button>
			<view class="sub-txt">注释：目前只能提现</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userId', 'openId','userInfo']),
			// 总积分从我的页面路由地址上携带过来

		},
		data() {
			return {
				totalMoney: 100,
				exchangeValue:0
			}
		},
		onLoad(){
			console.log(this.userInfo)
		},
		methods: {

			handleSetAll() {
				this.exchangeValue = this.totalMoney
			},
			// 立即提现
			async exchangeIntegration() {
				const params = {
					openid: this.openId,
					amount: this.exchangeValue,
					userid: this.userId
				}
				
				try {
					// const res = await exchangeIntegration(params)
					// console.log('🚀 ~ file: index.vue ~ line 63 ~ exchangeIntegration ~ res', res)
					// this.$toast({
					// 	message: '兑换成功！',
					// 	duration: 1000,
					// 	onOpened: () => {
					// 		this.submitBtnDisabled = true
					// 		this.submitBtnLoading = false
					// 	},
					// 	onClose: () => {
					// 		this.$router.go(-1)
					// 	}
					// })
				} catch (error) {
					this.submitBtnDisabled = false
					this.submitBtnLoading = false
					this.exchangeValue = null
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.exchange {
		padding: 32rpx;


	}

	.hd {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 250rpx;
		padding: 0 20px;
		box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
		border-radius: 40px;
		background-image: -webkit-linear-gradient(135deg, rgb(239, 65, 18) 8%, rgb(255, 144, 95) 85%);


	}

	.right {
		/deep/.van-image {
			margin-top: 10px;

			img {
				width: 96px;
				height: 96px;
			}
		}

		.num {
			font-size: 45rpx;
			font-weight: bold;
			color: #fff;
			margin-top: 16px;
		}
	}

	.left {
		/deep/.van-image {
			margin-top: -30px;

			img {
				width: 200px;
				height: 160px;
			}
		}

		.text {
			text-align: center;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.5);
		}
	}

	.bd {
		margin-top: 32px;
		padding: 40px 60px 60px 60px;
		box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
		border-radius: 12px;


	}

	.title {
		color: #333;
		font-size: 32rpx;
		font-weight: bold;

		&.plain {
			font-size: 30rpx;
			font-weight: normal;
			margin-top: 40px;
		}
	}

	.van-cell {
		// margin: 0 30px;
		padding-right: 0;
		padding-left: 0;

		&::after {
			left: 0;
			right: 0;
		}

		/deep/.van-field__control {
			height: 100px;
			font-size: 48px;
			color: #333;
			font-weight: bold;
		}

		.van-button {
			height: 54px;
			line-height: 54px;
			border-color: #43acbf;
			color: #43acbf;
			font-size: 28px;
			padding: 0 20px;
		}
	}

	.exchange-btn {
		height: 96rpx;
		line-height: 96rpx;
		background-color: #ff6600;
		color: #fff;
		font-size: 60rpx;
		margin-top: 40px;
		border-radius: 25rpx;
	}

	.sub-txt {
		margin-top: 20px;
		color: #f60;
		font-size: 28rpx;
	}

	.handleSetAll {
		border-radius: 20px;
		color: blue;
		border: 1px solid;
		width: 131rpx;
		font-size: 25rpx;
		text-align: center;
	}
</style>